<template>
  <div>
    <el-container>
        <div class="_main">
        <div class="pld_top">
              <div>
                <img
                  :src="playlistpld.coverImgUrl"
                  alt=""
                  style="width: 208px; height: 208px; float: left"
                />
              </div>
              <div
                style="
                  width: 410px;
                  height: 48px;
                  float: left;
                  margin-left: 22px;
                "
              >
                <h2 style="font-size: 20px">
                  {{ playlistpld.name }}
                </h2>
                <div>
                  <img
                    :src="playlistpld.creator.avatarUrl"
                    alt=""
                    style="width: 35px; height: 35px"
                  />
                  <span>{{ playlistpld.creator.nickname }}</span>
                  <span>{{ playlistpld.createTime }}</span>
                </div>
                <div class="tag-wrap">
                  <span class="title">标签:</span>
                  分类标签
                  <ul>
                    <li
                      v-for="(item, index) in playlistpld.tags"
                      :key="index"
                      style="float: left"
                    > 
                       {{ item }}
                    </li>
                  </ul>
                </div>
                <br />
                <p style="margin-top: 60px">
                  {{ playlistpld.description }}
                </p>
              </div>
            </div>
             <div class="pld_mid" >
              <div >
                <h3>歌曲列表</h3>
                <span>19首歌</span>
                <span>播放：51931次</span>
              </div>
              <div>
                <table class="pldtable" style="border:1px solid;margin:0 auto">
                  <thead>
                    <tr>
                      <td style="flex: 74"></td>
                      <td style="flex: 237">歌曲列表</td>
                      <td style="flex: 111">时长</td>
                      <td style="flex: 89">歌手</td>
                      <td style="flex: 127">专辑</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(item, index) in playlistpld.tracks"
                      :class="{ activel: index % 2 == 0 }"
                      style="border-bottom:1px solid"
                    >
                      <td style="flex: 74">
                        {{ index + 1 }}
                        <i class="el-icon-video-play" @click="playMusic(item.id)"></i>
                      </td>
                      <td style="flex: 237">{{ item.name }}</td>
                      <td style="flex: 111">3分10秒</td>
                      <td style="flex: 89">{{ item.ar[0].name }}</td>
                      <td style="flex: 127">{{ item.al.name }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
        </div>
    </el-container>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "mymusiplaylist",
  data() {
    return {
      activeIndex: "1",
      //总条数
      total: 0,
      //页码
      page: 1,
      //歌单详细数据
      playlistpld: [],
      comments:[],
      musicUrl:''
    };
  },
   created() {
    axios({
      url: "http://localhost:3000/playlist/detail",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      this.playlistpld = res.data.playlist;
    });
    axios({
      url: "http://localhost:3000/comment/playlist",
      method: "get",
      params: {
         id:this.$route.query.id,
        // limit:10,
        // offset:0
      },
    }).then((res) => {
     console.log(res)
    //   // 总个数
    //   this.total = res.data.total
    //   // 评论数据
    //   this.comments = res.comments
  
    });
  },
};
</script>
<style>
._main {
  width: 979px;
  margin: 0 auto;

}
</style>